<template>
  <div :class="['theme-switch', isDark ? 'is-checked' : '']">
    <span class="theme-switch__core" ref="core" @click="toggleDark">
      <div class="theme-switch__core__action">
        <SvgIcon :icon-class="isDark ? 'moon' : 'sun'" />
      </div>
    </span>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from "vue";
// import variables from "@/styles/variables.module.scss";
import appStore from "@/store";
export default defineComponent({
  setup(props, ctx) {
    const isDark = computed(() => appStore.appSetting.isDarkTheme);
    let className = isDark.value ? "dark" : "";
    window.document.documentElement.setAttribute("class", className);
    // 切换主题
    const toggleDark = () => {
      appStore.appSetting.toggleDarkTheme();
    };

    return {
      // theme,
      // changeTheme,
      // variables,
      isDark,
      toggleDark,
    };
  },
});
</script>

<style lang="scss" scoped>
.theme-switch {
  display: inline;
  &__core {
    @include bg_color("bg_color");
    @include border_color("border_color");
    margin: 0;
    display: inline-block;
    position: relative;
    width: 44px;
    height: 22px;
    border: 1px solid;
    outline: none;
    border-radius: 11px;
    box-sizing: border-box;
    cursor: pointer;
    transition: border-color 0.3s, background-color 0.3s;
    vertical-align: middle;
    // 这是关闭状态
    &__action {
      @include font_color("font_color");
      position: absolute;
      // 椭圆有1px的边框
      top: 1.5px;
      left: 2px;
      border-radius: 100%;
      // 滑块动画时间以及背景颜色变化的效果
      transition: all 0.3s;
      width: 17px;
      height: 17px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  // 这是激活状态
  &.is-checked {
    .theme-switch__core {
      .theme-switch__core__action {
        left: 100%;
        margin-left: -19px;
      }
    }
  }

  /** 
  * 后续待实现的样式
  */
  .slider{
    &::before{
      // sun
      border-radius: 20px;
      background: linear-gradient(40deg, #ff0080, #ff8c00 70%);
      transition: .4s;
    }
  }
  input:checked + .slider:before{
    background: #303136;
    box-shadow: inset -3px -2px 5px -2px #8983f7, inset -10px -4px 0 0 #a3dafb;
  }
}
</style>
